﻿<%@ page title="" language="C#" masterpagefile="~/Site.master" autoeventwireup="true" inherits="CreateQuestion, MainSite" %>

<asp:Content ID="Content1" ContentPlaceHolderID="BodyContent" Runat="Server" ClientIDMode="Static" >
    <div class="contentfull">
	<div class="breadcrumbs">
		<ul id="crumbs">
			<li><a title="My Account" href="#">My Account</a>  <img src=Content/Images/separator.png alt="&rarr;" class="separator"> 				Questions 			</li>
		</ul>
	</div>

		<div id="showMessages"></div>

<div class="top">
	<h1>Add a Question</h1>
</div>

<div class="content">
<fieldset>
<form method="post" action="QuestionCreated.aspx">
	<input type="hidden" name="action" value="addquestion2" />
    <input type="hidden" name="questionId" value="<% = this.GetQuestionId() %>"  id="hdnQuestionId" />
	<label for="questionInput">Question</label>
	<span class="lower_comment same">Add a question to any service to collect more information. The questions appear in-app after each scan.</span>
	<input type="text" class="largeinput" name="question" id="questionInput"/><br/><br/>

	<label>Answer Type</label>
	<div class="divradioset" id="questionTypes">
		<input type="radio" class="showradio" name="answertype" value="manual" id="radioManual"/>
        <label for="radioManual">Short Answer</label><br/>
		<span class="lower_comment">The app user will enter an answer with the device's keyboard.</span>
		<div class="showdiv">
			<input type="checkbox" id="useNumericKeypad" name="numeric_manual" value="1"/><label for="useNumericKeypad" class="small">Limit to numeric entry</label>
		</div>
		
		<input type="radio" class="showradio" name="answertype" value="barcode" id="radioBarcode"/>
        <label for="radioBarcode">Scan A Barcode</label><br/>
		<span class="lower_comment">The app user will have the option to scan in an answer or enter it with the device's keyboard.</span>
		<div class="showdiv">
   			<input type="checkbox" id="useNumericBarcode" name="numeric_barcode" value="1"/><label for="useNumericBarcode" class="small">Limit to numeric entry</label>
		</div>

		<input type="radio" class="showradio" name="answertype" value="option" id="radioRadiobutton"/>
        <label for="radioRadiobutton">Multiple-Choice (Single Answer)</label><br/>
		<span class="lower_comment">The app user will only be able to select one answer from the options provided.</span>

		<input type="radio" class="showradio" name="answertype" value="dropdown" id="radioDropdown"/>
        <label for="radioDropdown">Multiple Choice (Drop-Down Menu)</label><br/>
		<span class="lower_comment">The app user will only be able to select one answer. Intended for questions with 10 or more options.</span>

		<input type="radio" class="showradio" name="answertype" value="checkbox" id="radioCheckbox"/>
        <label for="radioCheckbox">Multiple Choice (Multiple Answer)</label><br/>
		<span class="lower_comment">The app user will be able to select all answers that apply to the question.</span>

		<div id="showOption" class="showdiv">
			<div id="answerOptionsDiv">
				<div>Answer Option: <br/>
					<input type="text" class="inputed" name="answer[]"/>
				</div>
				<div class="answerDiv">Answer Option: <br/>
					<input type="text" class="inputed" name="answer[]"/>
				</div>
			</div>
			<input type="button" value="Add Option" id="addAnswer" class="black_button blarge" />
		</div>
		<script>
		    $(document).ready(function () {
		        $("#radioRadiobutton, #radioCheckbox, #radioDropdown").click(function (event) {
		            if ($(this).nextUntil('.showradio', '#showOption').length > 0) return true;
		            var so = $("#showOption");
		            if (so.is(":visible")) {
		                var temp = so.clone();
		                temp.find("*[id]").attr('id', '');
		                so.replaceWith(temp).hide().insertAfter($(this).nextAll(".lower_comment:first"));
		                temp.on('slidup', function () { temp.remove() });
		            } else {
		                so.insertAfter($(this).nextAll(".lower_comment:first"));
		            }
		            return true;
		        });
		        activateDivRadioSet($("#questionTypes"));
		        $(document).on('click', "#addAnswer", function (event) {
		            var clone = $(".answerDiv").first().clone();
		            clone.append('<a href="#" class="removeAnswer"><i>(remove)</i></a><br/>').hide();
		            clone.find(".inputed").val('');
		            clone.appendTo($("#answerOptionsDiv")).slideDown();
		        });
		        $(document).on('click', '.removeAnswer', function (event) {
		            $(this).parent().slideUp(200, function () { $(this).remove(); });
		            return false;
		        });
		    });
		</script>
	</div><br/>
	<input type="submit" value="Create"  class="black_button blarge" />
</form>
</fieldset>
</div>
</div> <!-- /.contentfull -->
</asp:Content>

